<script setup>
import { ref, onMounted } from 'vue'
import { getAll, addApi, deleteApi, queryByIdApi ,updateApi} from '@/api/api'
import { ElMessage } from 'element-plus'
import Zhujian from './zhujian.vue'

const projectList = ref([])
const zhujianRef = ref(null)
const emits = defineEmits(['list'])
const handleUpdate = async(row) => { 
  if (zhujianRef.value) {
    zhujianRef.value.open = true
    zhujianRef.value.title = '修改用户信息'
    const res = await queryByIdApi(row.id)
    zhujianRef.value.form = res.data
    // 监听子组件的 list 事件
    zhujianRef.value.$on('list', () => {
      emits('list')
    })
  }
}
const handleDelete = async(row) => { 
  const res = await deleteApi(row.id)
  if(res.code){
    ElMessage({
      message: '操作成功！',
      type: 'success',
      plain: true,
    })
    emits('list')
  }else{
    ElMessage({
      message: '操作失败！',
      type: 'error',
      plain: true,
    })
  }
}
defineExpose({
projectList,


  handleDelete,
  handleUpdate
})
// 修改 handleAdd 方法
const handleAdd = () => { 
  if (zhujianRef.value) {
    zhujianRef.value.form = {
      id: 'null',
      name: '',
      gender: '',
      username: '',
      phone: '',
      password: ''
    }
    zhujianRef.value.title = '添加用户'
    zhujianRef.value.open = true
    // 监听子组件的 list 事件
    zhujianRef.value.$on('list', () => {
      emits('list')
    })
  }
}
</script>
<template>
  <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary"  @click="handleAdd">新增</el-button>
      </el-col>
    </el-row>
   <el-table v-loading="loading" :data="projectList">
      <el-table-column label="编号" align="center" type="index" width="120px" />
      <el-table-column label="员工编号" align="center" prop="username" width="150px" />
      <el-table-column label="员工姓名" align="center" prop="name" width="150px" />
      <el-table-column label="性别" align="center" prop="gender" width="150px" >
        <template #default="scope">
          <el-tag v-if="scope.row.gender==1">男</el-tag>
          <el-tag v-else>女</el-tag>
        </template>
        </el-table-column>
      <el-table-column label="电话" align="center" prop="phone" />

      <el-table-column label="操作" align="center" width="200px" fixed="right" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Zhujian ref="zhujianRef" ></Zhujian>
</template>
<style>
</style>